<!--引入公共的模板-->
{{extend './layout.html'}}
{{block 'content'}}
<!--轮播图-->
<div class="container-fuild carousel slide mb-5" id="carouselExampleIndicators" data-bs-ride="carousel">
  <div class="carousel-indicators">
    {{each banner}}
    {{if $index==0}}
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="{{$index}}"
      class="active"></button>
    {{else}}
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="{{$index}}"></button>
    {{/if}}
    {{/each}}
  </div>
  <div class="carousel-inner" style="max-height: 320px;width: 100%;">
    {{each banner}}
    {{if $index==0}}
    <div class="carousel-item active">
      <img src="{{$value.src}}" class="d-block w-100 h-100" alt="{{$index}}">
    </div>
    {{else}}
    <div class="carousel-item">
      <img src="{{$value.src}}" class="d-block w-100 h-100" alt="{{$index}}">
    </div>
    {{/if}}
    {{/each}}
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
<!--精品-->
<div class="container mt-5">
  <div class="row justify-content-between align-items-center">
    <h2 class="col-4">精品</h2>
    <a class="col-4 text-end more" href="/boutique">查看更多 >>></a>
  </div>
  <ul class="row">
    {{ each boutique}}
      <li class="col-12">
        <h3>
          <a href="#" target="_blank">如何建立个人博客？</a>
        </h3>
        <div class="d-flex">
          <div class="">
            <a href="//cdn.duanliang920.com/uploads/allimg/140605/1-1406052123280-L.jpg" class="">
              <img src="https://cdn.duanliang920.com/uploads/allimg/140605/1-1406052123280-L.jpg" class="" alt="如何建立个人博客？">
            </a>
          </div>
          <div class="news-content fl">
            <div class="d-flex justify-content-between">
              <p class="">
                <a href="#" class="author-img">
                  <img src="//cdn.duanliang920.com/assets/web/images/author.5d032d5.png" width="33" height="33" alt="段亮" class="author-img"> 
                  <span >段亮</span>
                </a>
              </p> 
              <span class="date-time fl">发布时间：<em >2014-06-05 10:24:00</em></span> 
              <span class="classify fl">分类：<a href="#">学无止境</a></span>
            </div>
            <p class="news-info">
              想必很多人都想建立一个，属于自己的个人博客，把自己的一些学习的经验和经历，通过互联网的形式来分享给别人。通过分享与网友进行互动，让更多的人了解和认识你，并且树立自己在互联网上的个人品牌，其实这就是一种“自媒体”。那么我们怎么去建立自己独立...
            </p>
          </div>
        </div>
      </li>
    {{ /each}}
  </ul>
</div>
<!--免费-->
<div class="container mt-5">
  <div class="row justify-content-between align-items-center">
    <h2 class="col-4">免费</h2>
    <a class="col-4 text-end more" href="/free">查看更多 >>></a>
  </div>
  <div class="row">
    {{ each free }}
    <div class="col-sm-12 col-md-12 col-lg-3 col-xl-3 mb-5">
      <a href="{{ '/detail?id='+$value.article_id }}">
        <div class="card shadow">
          <div>
            <img src="{{ $value.thumb }}" class="card-img-top" alt="{{ $index }}" height="150px">
          </div>
          <div class="card-body">
            <h5 class="card-title">{{ $value.title }}</h5>
            <p class="card-text"
              style="overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;">{{
              $value.intro }}</p>
          </div>
        </div>
      </a>
    </div>
    {{ /each }}
  </div>
</div>
{{/block}}